<template>
  <div v-loading="loading" class="container merak-overflow-y">
    <div class="wrapper">
      <div class="title">{{ $t("staff_list.personal_data") }}</div>
      <MerakUpload :file-list="files.user" :request="options => handleRequestInfo(options, 1)" :delete="handleDelete" />
    </div>
    <div class="wrapper">
      <div class="title">{{ $t("staff_list.archival_materials") }}</div>
      <MerakUpload :file-list="files.arch" :request="options => handleRequestInfo(options, 2)" :delete="handleDelete" />
    </div>
    <div class="wrapper">
      <div class="title">{{ $t("staff_list.resignation_information") }}</div>
      <MerakUpload :file-list="files.depart" :request="options => handleRequestInfo(options, 3)" :delete="handleDelete" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, UploadRequestOptions } from "element-plus";

import { getCurrentInstance, ref, reactive, onMounted } from "vue";

import { useRoute } from "vue-router";

import MerakUpload, { MerakUploadFileType } from "./Upload";

import { getFiles, uploadFiles, deleteFiles } from "@/api/modules/sysManage/personnel";

import { ResultEnum } from "@/enums/httpEnum";

const { proxy } = getCurrentInstance()!;

const route = useRoute();

const loading = ref(false);

const files = reactive<{
  user: MerakUploadFileType[];
  arch: MerakUploadFileType[];
  depart: MerakUploadFileType[];
}>({
  user: [],
  arch: [],
  depart: []
});

const handleRequestInfo = async (options: UploadRequestOptions, type: number) => {
  console.log(options)
  const { id } = route.query;
  if (!id) return;
  const formData = new FormData();
  formData.append(options.filename, options.file);
  uploadFiles(id as string, type, formData, evt => {
    options.onProgress(evt);
  })
    .then(({ code, data, message }) => {
      if (code == ResultEnum.SUCCESS) {
        options.onSuccess(data);
      } else {
        // @ts-ignore
        options.onError({ message: message });
      }
    })
    .catch(err => {
      options.onError(err);
    });
};

const handleDelete = async (fileId: string) => {
  const { id } = route.query;
  if (!id) return;
  return deleteFiles(id as string, fileId).then(({ code, message }) => {
    if (code == ResultEnum.SUCCESS) {
      ElMessage.success(proxy?.$t("merak.delete_success"));
    } else if (typeof message === "string") {
      ElMessage.error(message);
    }
  });
};

onMounted(async () => {
  const { id } = route.query;
  if (!id) return;
  loading.value = true;
  await getFiles(id as string).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      files.user = Object.values(data)?.[0]?.map(item => ({
        name: item.user_file_name,
        url: item.user_file_path,
        response: item
      }));
      files.arch = Object.values(data)?.[1]?.map(item => ({
        name: item.user_file_name,
        url: item.user_file_path,
        response: item
      }));
      files.depart = Object.values(data)?.[2]?.map(item => ({
        name: item.user_file_name,
        url: item.user_file_path,
        response: item
      }));
    }
  });
  loading.value = false;
});
</script>

<style scoped lang="scss">
.container > :not(:first-child),
.wrapper > :not(:first-child) {
  margin-top: var(--merak-padding);
}
.title {
  font-size: 16px;
  font-weight: 400;
}
</style>
